<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成绩查询练习</title>
    <style>
        table{
            border-collapse: collapse
        }
        table th,td{
            padding: 10px;
        }
        .choseStyle{
            color: tomato;
            background-color: lightgray;
        }
       
    </style>
</head>
<body>
    
    <div id="app">
        
        <div id="searchBar">
            <!-- 此处使用 v-model.lazy 节省性能 -->
            搜索：<input type="text" v-model.lazy="min"> <!-- 搜索最小值绑定 -->
            &nbsp; ~ &nbsp; 
            <input type="text" v-model.lazy="max"> <!-- 搜索最大值绑定 -->

        </div>
        <p></p>

        <div>
            排名方式：
            <!-- v-model绑定被选单选按钮的data值！！ -->
            <input type="radio" name="sortType" id="math" value="math" v-model="courseNameChecked"><label for="math">数学</label>
            <input type="radio" name="sortType" id="chinese" value="chinese" v-model="courseNameChecked"><label for="chinese">语文</label>
            <input type="radio" name="sortType" id="english" value="english" v-model="courseNameChecked"><label for="english">英语</label>
            <input type="radio" name="sortType" id="allscore" value="allscore" v-model="courseNameChecked"><label for="allscore">总分</label>
        </div>
        <p>{{courseNameChecked}}</p>

        <table>
            <tr>
                <th>排名</th>
                <th>学生姓名</th>
                <th>数学</th>
                <th>语文</th>
                <th>英语</th>
                <th>总分</th>
            </tr>

            <tr v-if="afterSortStuScoreInfo.length==0">
                <th rowspan="6">无满足所选条件的学生信息</th>
            </tr>

            <!-- 数据渲染 结合单选按钮，使用排序之后的 ！！！数据-->
            <tr v-else v-for="(item,index) in afterSortStuScoreInfo">
                <!-- 始终从第一名到最后一名，index+1即可 -->
                <td>{{index+1}}</td> 
                <td>{{item.name}}</td>
                <!-- ！！！！注意格式 courseNameChecked是字符串，而所以allscore也要加引号 -->
                <td :class="{choseStyle:courseNameChecked=='math'}">{{item.math}}</td>
                <td :class="{choseStyle:courseNameChecked=='chinese'}">{{item.chinese}}</td>
                <td :class="{choseStyle:courseNameChecked=='english'}">{{item.english}}</td>
                <td :class="{choseStyle:courseNameChecked=='allscore'}">{{item.math+item.chinese+item.english}}</td>
            </tr>

        </table>

    </div>
    
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data(){
                return{
                    msg:"hello!",

                    // 单选按钮数据绑定
                    courseNameChecked:"allscore",

                    // 搜索数据绑定
                    min:"0",
                    max:"300",

                    // 原始学生成绩数据
                    stuScoreInfo:[
                        {name:"aaa", math:80, chinese:90, english:100},
                        {name:"bbb", math:45, chinese:91, english:10 },
                        {name:"ccc", math:76, chinese:92, english:60 },
                        {name:"ddd", math:89, chinese:93, english:60 },
                        {name:"eee", math:78, chinese:94, english:80 },
                        {name:"fff", math:95, chinese:95, english:90 },
                        {name:"ggg", math:23, chinese:96, english:65 },
                    ]
                }
            },
            methods:{},

            // 计算属性的使用-！！！！预存结果
            computed:{
                /* 搜索和排序被放在一起思考了，思路是：
                // 1. 现提出（搜索范围）内的数据，存到一个计算属性(filterStuScoreInfo)内
                // 2. 使用上面得到的计算属性(filterStuScoreInfo)，按单选按钮的值对得到的计算属性内的数据进行排序，
                      再存放置一个新的计算属性(afterSortStuScoreInfo)
                */

                // 解决总分（item.math+item.chinese+item.english）写的太麻烦了
                // 这里先死记--
                stuScoreTotal(){
                    return function(item){
                        return item.math+item.chinese+item.english;
                    }
                },

                // 搜索用
                filterStuScoreInfo(){
                    if(this.courseNameChecked == "allscore"){
                        return this.stuScoreInfo.filter(item => this.stuScoreTotal(item) >=this.min && this.stuScoreTotal(item) <= this.max);
                    };
                    return this.stuScoreInfo.filter(item => item[this.courseNameChecked] >=this.min && item[this.courseNameChecked] <=this.max);
                    
                    // 下面亦可
                    // return this.stuScoreInfo.filter(item => {
                    //     if(this.courseNameChecked == "allscore"){
                    //         return (item.math+item.chinese+item.english) >=this.min && (item.math+item.chinese+item.english) <= this.max;
                    //     }
                    //     return item[this.courseNameChecked] >=this.min && item[this.courseNameChecked] <=this.max;
                    // })    
                },

                // 排序用
                afterSortStuScoreInfo(){
                    switch(this.courseNameChecked){
                        // Array.sort()的用法！！！
                        case "allscore":
                            // 用上一个计算属性的值 this.filterStuScoreInfo！！！
                            return this.filterStuScoreInfo.sort((a, b) => this.stuScoreTotal(b) - this.stuScoreTotal(a) );
                        case "math":
                            return this.filterStuScoreInfo.sort((a, b) => b.math - a.math);
                        case "chinese":
                            return this.filterStuScoreInfo.sort((a, b) => b.chinese - a.chinese);
                        case "english":
                            return this.filterStuScoreInfo.sort((a, b) => b.english - a.english);
                    }
                }
            },
            watch:{}
        })
    </script>


</body>
</html>